<template>
  <el-select
    v-model="selectClassId"
    class="filter-item"
    filterable
    placeholder="请输入班级名称"
    remote
    clearable
    reserve-keyword
    @change="indexSelect"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.id+'|'+item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import { classPage } from '@/api/class'

export default {
  name: 'SearchOptionClass',
  props: {
    classId: {
      required: false,
      type: String
    }
  },
  data() {
    return {
      options: [],
      selectClassId: this.classId,
      listQuery: {
        page: 1,
        limit: 999,
        querySort: '-id'
      }
    }
  },
  watch: {
    classId: {
      handler(newVal, oldVal) {
        this.selectClassId = newVal
      }
    }
  },
  created() {
    this.remoteSearch()
  },
  methods: {
    remoteSearch() {
      classPage(this.listQuery).then(res => {
        this.options = res.data
      })
    },
    indexSelect: function() {
      this.$emit('setSearchClassId', { classId: this.selectClassId })
    }
  }
}
</script>
